<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8" />
  <title>系统登录</title>
  <!-- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> -->
  <meta name="viewport" content="width=device-width, initial-scale=1"
  />
  <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
  <link rel="Shortcut Icon" href="/admin/favicon.ico" type="image/x-icon" />
<!--  <link rel="stylesheet" href="https://unpkg.com/amis/sdk/sdk.css" />-->
<!--  <link rel="stylesheet" href="https://unpkg.com/amis/sdk/helper.css" />-->
<!--  <script src="https://unpkg.com/amis/sdk/sdk.js"></script>-->
  <link rel="stylesheet" href="/admin/sdk/sdk.css" />
  <link rel="stylesheet" href="/admin/sdk/helper.css" />
  <script src="/admin/sdk/sdk.js"></script>
  <!-- 这是默认主题所需的，如果是其他主题则不需要 -->
  <!-- 从 1.1.0 开始 sdk.css 将不支持 IE 11，如果要支持 IE11 请引用这个 css，并把前面那个删了 -->
  <!-- <link rel="stylesheet" href="sdk-ie11.css" /> -->
  <!-- 不过 amis 开发团队几乎没测试过 IE 11 下的效果，所以可能有细节功能用不了，如果发现请报 issue -->
  <style>
      html,
      body,
      .app-wrapper {
          position: relative;
          width: 100%;
          height: 100%;
          margin: 0;
          padding: 0;
      }
      .login-ontainer {
          background-image: url(/admin/login.svg);
          background-repeat: no-repeat;
          background-position: center 110px;
          background-size: 100%;
          background-color: #f0f2f5;
      }
      .cxd-Image {
          border: none !important;
      }
      .mt-7 {
          margin-top: 1.5rem !important;
      }
  </style>
</head>
<body>
<div id="root" class="app-wrapper"></div>
<script type="text/javascript">
  (function () {
    let amis = amisRequire("amis/embed");
    // 通过替换下面这个配置来生成不同页面
    let amisJSON = {
      type: "page",
      title: false,
      bodyClassName: "login-ontainer",
      body: [
        {
          type: "flex",
          direction: "column",
          alignItems: "center",
          className: "mt-20",
          items: [
            {
              type: "flex",
              justify: "center",
              items: [
                {
                  type: "image",
                  width: "44px",
                  height: "44px",
                  imageMode: "original",
                  src: "/admin/logo.svg",
                  className: "mr-3",
                },
                {
                  // style: {
                  //   position: "relative",
                  //   top: "2px",
                  //   color: "rgba(0,0,0,.85)",
                  //   fontWeight: 600,
                  //   fontSize: " 33px",
                  // },
                  type: "tpl",
                  tpl: "CMSWing",
                  className: "font-serif text-3xl font-semibold",
                },
              ],
            },
            {
              type: "tpl",
              tpl: "基于 Nest 的 可扩展的 Node.js 服务器端应用程序的框架！",
              className: " text-md p-3 text-center text-secondary",
            },

            {
              type: "tpl",
              tpl: `<i class="fa-solid fa-feather-pointed"></i> 账户密码登录`,
              className:
                "w-96 border-b border-gray-300 border-solid border-0 text-lg p-3 mb-7 mt-6 text-info font-semibold",
            },
            {
              id: "login",
              className: "w-96",
              type: "form",
              mode: "horizontal",
              initApi:"/admin/checkLogin",
              api: "/admin/login",
              redirect: "/admin/",
              title: "账户密码登录",
              wrapWithPanel: false,
              actions: [],
              body: [
                {
                  label: false,
                  type: "input-text",
                  name: "username",
                  borderMode: "half",
                  placeholder: "请输入账号",
                  required: true,
                  prefix: "账号：",
                  validationErrors: {
                    isRequired: "请输入账号",
                  },
                },
                {
                  label: false,
                  type: "input-password",
                  name: "password",
                  borderMode: "half",
                  placeholder: "请输入密码",
                  required: true,
                  prefix: "密码：",
                  validationErrors: {
                    isRequired: "请输入密码",
                  },
                },

                {
                  type: "group",
                  body: [
                    {
                      label: false,
                      name: "checkbox",
                      type: "checkbox",
                      option: "记住登录",
                      mode: "inline",
                    },
                    {
                      className: "pt-1 inline-block float-right",
                      type: "link",
                      href: "#",
                      body: "忘记密码？",
                    },
                  ],
                },
              ],
            },

            {
              className: "w-96 mt-7",
              label: "登录",
              primary: true,
              type: "button",
              size: "lg",
              onEvent: {
                click: {
                  actions: [
                    {
                      actionType: "submit",
                      componentId: "login",
                    },
                  ],
                },
              },
            },
            {
              type: "button-group",
              className: "mt-6",
              btnLevel: "light",
              buttons: [
                {
                  type: "button",
                  icon: "/admin/graphql.svg",
                  tooltip: "GraphQL",
                },
                {
                  type: "button",
                  icon: "/admin/swagger.svg",
                  tooltip: "Swagger",
                },
                {
                  type: "button",
                  icon: "/admin/nest.svg",
                  tooltip: "Nest",
                },
                {
                  type: "button",
                  icon: "fa-brands fa-node-js",
                  tooltip: "Node.js",
                },
                {
                  type: "button",
                  icon: "fa-brands fa-html5",
                  tooltip: "HTML5",
                },
                {
                  type: "button",
                  icon: "/admin/mysql.svg",
                  tooltip: "MySQL",
                },
                {
                  type: "button",
                  icon: "/admin/typeorm.png",
                  tooltip: "TypeORM",
                },
              ],
            },
          ],
        },
      ],
    };
    let amisScoped = amis.embed("#root", amisJSON,{},{
      // 全局 api 请求适配器
      // 另外在 amis 配置项中的 api 也可以配置适配器，针对某个特定接口单独处理。
      requestAdaptor(api) {
        api.headers.Authorization = `Bearer ${localStorage.getItem('admin_access_token')}`
        return api;
      },
      // 全局 api 适配器。
      // 另外在 amis 配置项中的 api 也可以配置适配器，针对某个特定接口单独处理。
      responseAdaptor(api, payload, query, request, response) {
        if(payload.statusCode===401){
          response.status=0;
          return payload
        }else if(api.url==='/admin/checkLogin'&&payload.status===0) {
          window.location.href='/admin/'
        }else if(api.url==='/admin/login'&&payload.access_token) {
          localStorage.setItem('admin_access_token',payload.access_token);
        }
        return payload;
      },
    });
  })();
</script>
</body>
</html>
